<template>
    <div>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <div class="title">普联东文官网后台</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :xs="10" :sm="8" :md="6" :lg="5" :xl="4">
        <div>
          <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
              <el-form-item prop="username">
                <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder="密码"
                  v-model="ruleForm.password"
                  @keyup.enter.native="submitForm('ruleForm')"
                ></el-input>
              </el-form-item>
              <div class="login-btn">
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
        return {
             ruleForm: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    {
                        min: 4,
                        max: 12,
                        message: "长度4-12之间"
                    }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 6,
                        max: 12,
                        message: "长度6-12之间"
                    }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let p = {};
                    let url = "/api/member/login";
                    p.username = this.ruleForm.username;
                    p.password = this.ruleForm.password;
                    this.$http.fetch(url,p)
                    .then(res=>{
                        if (res.code == 0) {
                            this.$message({
                                showClose: true,
                                message: "登录成功",
                                type: "success"
                            });
                            sessionStorage.setItem("token", res.data.token);
                            sessionStorage.setItem("username", res.data.username);
                            this.$router.push("/main");
                        }
                    })
                    .catch(err => {});
                }
            })        
        },
        init(){
            //清除本地缓存
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
        }
    },
    mounted(){
        this.init();
    }

}
</script>

<style scoped>
.title {
  text-align: center;
  font-size: 30px;
  margin-top: 250px;
  margin-bottom: 20px;
  white-space: nowrap;
  min-width: 425px;
}

.login-btn button {
  width: 100%;
}
</style>